<template>
  <div class="find">
    <div class="left">
      <div>
        <div
          v-for="(item, index) in shopList"
          :key="item.id"
          :class="['item', { active: carIndex == index }]"
          @click="changeIndex(index)">
            {{ item.tit }}
            <span style="color: red">{{ item.children.reduce((p, n) => p + n.count, 0) }}</span>
        </div>
      </div>
    </div>
    <div class="right">
      <div>
        <div
          v-for="(item, index) in shopList"
          :key="index"
          ref='box'
          :class="'box' + index">
            <h4>{{ item.tit }}</h4>
            <div
              v-for="(item1, index1) in item.children"
              :key="index1"
              class="item">
                <div class="img">
                  <img :src="item1.img" alt="">
                </div>
                <div>
                  <div>名称：{{ item1.tit }}</div>
                  <div>价格：{{ item1.price }}</div>
                  <div>
                    <span v-if="item1.count > 0">
                      <span @click="addCount({ index, index1, type: '-' })">-</span>
                      <span style="padding: 0 10px;">{{ item1.count }}</span>
                    </span>
                    <span @click="addCount({ index, index1, type: '+' })">+</span>
                  </div>
                </div>
            </div>
        </div>
      </div>
    </div>

    <div class='footer' @click="show = true">
      总数：{{ countAll }}
      总价格：{{ priceAll}}
    </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '30%' }" :round="true" safe-area-inset-bottom>
      <div
        v-for="(item, index) in shopList"
        :key="index">
          <div
            v-for="(item1, index1) in item.children"
            v-show="item1.count > 0"
            :key="index1">
              <span style="padding: 0 10px;">名称：{{ item1.tit }}</span>
              <span v-if="item1.count > 0">
                <span @click="addCount({ index, index1, type: '-' })">-</span>
                <span style="padding: 0 10px;">{{ item1.count }}</span>
              </span>
              <span @click="addCount({ index, index1, type: '+' })">+</span>
          </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
// 引入 vuex 辅助函数
import { mapState, mapGetters, mapActions } from 'vuex';

// 引入 scroll
import Bscroll from 'better-scroll';

export default {
  name: 'Find',
  data() {
    return {
      carIndex: 0,
      show: false,
    }
  },
  mounted() {
    setTimeout(() => {
      // 调用一个 scroll 初始化函数
      this._initScroll();
    }, 2000);
  },
  computed: {
    // 结构 state 数据
    ...mapState(['shopList']),
    // 解构 getters 数据
    ...mapGetters(['countAll', 'priceAll']),

  },
  // 定义事件
  methods: {
    // 解构 actions 方法
    ...mapActions(['addCount']),
    // 点击修改左侧高亮
    changeIndex(carIndex) {
      this.carIndex = carIndex;

      // 点击滚动右侧
      this.rightScroll.scrollToElement(`.box${carIndex}`, 1000);
    },
    // scroll 初始化函数
    _initScroll() {
      // 实力化 scroll
      this.leftScroll = new Bscroll('.left', {
        click: true
      });
      this.rightScroll = new Bscroll('.right', {
        click: true,
        probeType: 3
      });

      // 重新计算 scroll
      this.leftScroll.refresh();
      this.rightScroll.refresh();

      // 获取 dom 距离顶部的位置
      const h = this.$refs.box.map(item => item.offsetTop);
      const itemH = this.$refs.box[0].offsetHeight;
      h.push(h[h.length - 1] + itemH);

      // 添加滚动事件
      this.rightScroll.on('scroll', (position) => {
        const y = Math.abs(position.y) + (document.documentElement.clientHeight / 2);
        // 便利数组
        h.forEach((item, index) => {
          // console.log(y, item, h);
          if(y >= item && y < h[index + 1]) {
            this.carIndex = index
          }
        });

      })
    }
  }
}
</script>

<style lang="scss">
.find {
  width: 100%;
  /* display: flex; */
  overflow: hidden;
  .left {
    float: left;
    width: 120px;
    height: calc(100% - 51px);
    overflow: hidden;
    border-right: solid 1px #ccc;
    .item {
      width: 100%;
      height: 50px;
      text-align: center;
      line-height: 50px;
      border-bottom: solid 1px #ccc;
      &.active {
        color: red;
      }
    }
  }
  .right {
    float: left;
    width: calc(100% - 121px);
    /* flex: 1; */
    height: calc(100% - 51px);
    overflow: hidden;
    .item {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      height: 120px;
      border-bottom: solid 1px #ccc;;
      .img {
        width: 120px;
        height: 100px;
        text-align: center;
      }
    }
  }
  .footer {
    clear: both;
    border-top: solid 1px #ccc;
    height: 50px;
  }
}
</style>
